<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>websocket 连接测试</title>
</head>

<body>
    <div id="message"></div>
    <div>
        <div>
            <label>用户名</label>
            <input type="text" id="name" value="wwei">
            <button onclick="initSocket()">开始连接</button>
            <button id="clear" onclick="clearData()">清空</button>
        </div>
        <input type="text" id="test">
        <button onclick="send()">发送</button>
        <button onclick="closeWebSocket()">断开连接</button>
    </div>
    <script>
        var websocket = null;
        var closeStatus = false;
        var initSocket = function () {
            if ('WebSocket' in window) {
                let user = document.getElementById("name").value;
                websocket = new WebSocket("ws://192.168.17.146:710/webSocket/" + user);
                // websocket = new WebSocket("ws://wodefuck.com/socketservice/webSocket/"+user);
                //连接成功建立的回调方法
                websocket.onopen == null ? (websocket.onopen = function (event) {
                    setMessageInnerHTML("connect success!");
                    closeStatus = false;
                }):websocket.onopen;
                //接收到消息的回调方法
                websocket.onmessage == null ? (websocket.onmessage = function (event) {
                    setMessageInnerHTML(event.data);
                }) : websocket.onmessage;
                //连接关闭的回调方法
                websocket.onclose == null ? (websocket.onclose = function () {
                    setMessageInnerHTML("close connect!");
                }) : websocket.onclose;
                //连接发生错误的回调方法
                websocket.onerror == null ? (websocket.onerror = function () {
                    setMessageInnerHTML("error");
                    setTimeout(() => {
                        // websocket.close();
                        initSocket();
                    }, 2000);
                }) :websocket.onerror;
            } else {
                alert("Don't support websocket")
            }
        }
        // initSocket();
        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            websocket.close();
            closeStatus = true;
        }

        //将消息显示在网页上
        function setMessageInnerHTML(innerHTML) {
            document.getElementById('message').innerHTML += innerHTML + '<br/>';
        }

        //关闭连接
        function closeWebSocket() {
            websocket.close();
            closeStatus = true;
        }

        //发送消息
        function send() {
            var message = document.getElementById('test').value;
            if (websocket.readyState == 1) {
                websocket.send(message);
            } else {
                websocket.close();
                initSocket();
                console.log("not connect socket!");
            }
        }
        function clearData(){
            document.getElementById("name").value = "";
        }
    </script>
</body>

</html>